import React, {Component} from 'react';
import './style.less';
import { Card, Form, Button, Input, message, Icon, Checkbox } from 'antd';

class FormLogin extends Component{

	handleSubmit = () => {
		let userInfo = this.props.form.getFieldsValue();
		this.props.form.validateFields((err, values)=>{
			if(!err){
				message.success(`${userInfo.userName}成功登录！`)
			}
		})
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div>
				<Card title="登录行内表单">
					<Form layout="inline">
						<Form.Item>
							<Input placeholder="请输入用户名" />
						</Form.Item>
						<Form.Item>
							<Input placeholder="请输入密码" />
						</Form.Item>
						<Form.Item>
							<Button type="primary">登录</Button>
						</Form.Item>
					</Form>
				</Card>
				<Card title="登录水平表单">
					<Form>
						<Form.Item>
							{
								getFieldDecorator('userName', {
									initialValue: 'Jack',
									rules:[{
										required: true,
										message: 'Please input your username!'
									},{
										min:5, max: 10,
										message: '请输入5到10位的字符'
									},{
										pattern: new RegExp('^\\w+$', 'g'),
										message: '用户名必须为英文字母或者数字'
									}]
								})(<Input prefix={<Icon type="user" />} placeholder="请输入用户名" />)
							}
							
						</Form.Item>
						<Form.Item>
						{
								getFieldDecorator('password', {
									initialValue: '123456',
									rules:[{
										required: true,
										message: 'Please input your Password!'
									},{
										min:6, max: 10,
										message: '请输入5到10位的字符'
									},{
										pattern: /^\w+$/g,
										message: '用户名必须为英文字母或者数字'
									}]
								})(<Input  prefix={<Icon type="lock" />} placeholder="请输入密码" />)
							}
						</Form.Item>
						<Form.Item>
						{
								getFieldDecorator('rememver', {
									valuePropName: 'checked',
            						initialValue: true
								})( <Checkbox>Remember me</Checkbox>)
							}
							<a className="login-form-forgot" href="">Forgot password</a>
							<Button type="primary" htmlType="submit" className="login-form-button">
            					Log in
          					</Button>
          					Or <a href="">register now!</a>
						</Form.Item>
					</Form>
				</Card>
			</div>
		);
	}
}
export default Form.create()(FormLogin);